import React, { Component } from 'react';
import './home.css';
class home extends Component {
  constructor(props){
    super(props);
    this.state={
      date: new Date()
    }
  }
  render() {
    return(
      <div className="outbox">
      <div className="container">
        <div className="headBtn">
          <button className="clockBtn">点击签到</button>
        </div>
        <div className="celendar">
          <div className="dataArr">
            <span className="prev">◀</span>
            <h3 className="year"></h3>年
            <h3 className="month"></h3>月
            <span className="next">▶</span>
          </div>
          <ul className="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
          </ul>
          <ul className="day">

          </ul>
        </div>
      </div>
      </div>
    )
  }
  componentDidMount(){
    this.changCelendar();
  }
  changCelendar(data){
    if(data){
      var cYear = data.getFullYear();
      var cMonth = data.getMonth();
      var cDay = data.getDate();
    } else {
      var cYear = this.state.date.getFullYear();
      var cMonth = this.state.date.getMonth();
      var cDay = this.state.date.getDate();
    }

    //每个月的第一天是周几
    let firstDay = new Date(cYear,cMonth,1).getDay();
    //获取每个月的天数
    let days = new Date(cYear,cMonth + 1,-1).getDate() + 1;
    let arr = ['1','2','3','4','5','6','7','8','9','10','11','12'];
    document.querySelector('.year').innerHTML = cYear;
    document.querySelector('.month').innerHTML = arr[cMonth];

    //只给本月的当天加样式
    let NowMonth = new Date().getMonth();

    //得到上个月的总天数
    let prevMonthDays = new Date(cYear,cMonth,0).getDate();

    let html = '';
    for(var i = prevMonthDays - firstDay + 1;i <= prevMonthDays;i++){
      html += `<li class="prevDay">${i}</li>`;
    }

    for(var i = 1;i <= days;i++){
      if(i == cDay && cMonth == NowMonth){
        html += `<li class="now">${i}</li>`;
      } else {
        html += `<li>${i}</li>`
      }
    }
    let nextDay = 7 - (firstDay + days) % 7;
    if(nextDay == 0){
      html += ''
    } else {
      for(var i = 1;i <= nextDay;i++){
        html += `<li class="nextDay">${i}</li>`;
      }
    }
    document.querySelector('.day').innerHTML = html;

    document.querySelector('.prev').onclick = () => {
      var date1 = this.state.date;
      date1.setMonth(date1.getMonth() - 1);
      this.changCelendar(date1);
    }
    document.querySelector('.next').onclick = () => {
      var date1 = this.state.date;
      date1.setMonth(date1.getMonth() + 1);
      this.changCelendar(date1);
    }
    // var Lis = document.querySelector('.day').querySelectorAll('li');
    // var LisWidth = document.querySelector('.day').querySelectorAll('li')[0].offsetWidth;
    // for(var i = 0;i < Lis.length;i++){
    //   document.querySelector('.day').querySelectorAll('li')[i].style.height = LisWidth + 'px';
    //   document.querySelector('.day').querySelectorAll('li')[i].style.lineHeight = LisWidth + 'px';
    // }
  }
}
export default home;